<template>
  <div class="start-wrap">
    <span class="iconfont icon-star active" v-for="item in this.getStarNum.length"></span>
    <span class="iconfont icon-star" v-for="item in (this.maxStarNum - this.getStarNum.length)"></span>
    <span class="score" v-if="this.starInfo.score">{{this.starInfo.score}}分</span>
    <span class="average" v-if="this.starInfo.default_price">￥{{this.starInfo.default_price}}人</span>
  </div>
</template>

<script>
  export default {
    name: 'Star',
    data: function() {
      return {
        maxStarNum: 5
      }
    },
    props: {
      starInfo: Object,
    },
    computed: {
      getStarNum() {
        let starNum = parseInt(this.starInfo.star),
            res = [];
        if (starNum > 5) {
          starNum = 5;
        } else if (starNum < 1) {
          starNum = 1;
        }
        for (var i = 0; i < starNum; i++) {
          res.push(i);
        }
        return res;
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .start-wrap {
    @include flex-row;
    align-items: center;

    span {
      font-size: .14rem;
    }

    .iconfont {
      color: #999999;
      margin: 0 .02rem;

      &.active {
        color: orange;
      }
    }

    .score {
      color: orange;
      margin-left: .1rem;
    }

    .average {
      color: #000000;
      margin-left: .1rem;
    }
  }
</style>
